[#inc style.html#]

        <script type="text/javascript" src="/js/easySlider1.7.js"></script>
        <script type="text/javascript">

        var codeHash=new Object();

        function switchScene(scene_id) {
         [#begin RESULT#]
         if (scene_id=='[#ID#]') {
           $('#controls[#NUMP#] a').click();
         }
         [#end RESULT#]
         return false;
        }

        function controlWindowPositionChanged(id) {
         alert(id);
         return false;
        }

        [#begin RESULT#][#begin ELEMENTS#][#begin STATES#][#if MENU_ITEM_ID!="0"#]
        var window[#ID#]_width=[#WINDOW_WIDTH#];
        var window[#ID#]_height=[#WINDOW_HEIGHT#];
        var window[#ID#]_posx=[#WINDOW_POSX#];
        var window[#ID#]_posy=[#WINDOW_POSY#];
        [#endif MENU_ITEM_ID#][#end STATES#][#end ELEMENTS#][#end RESULT#]

        function stateClicked(id) {

         [#begin RESULT#][#begin ELEMENTS#][#begin STATES#][#if MENU_ITEM_ID!="0"#]
         if (id==[#ID#]) {

          var top=$('#scene_background_<#RESULT.ID#>').offset().top;
          var left=$('#scene_background_<#RESULT.ID#>').offset().left;

          var wdth=window[#ID#]_width;
          var hdth=window[#ID#]_height;
          var x=window[#ID#]_posx+left;
          var y=window[#ID#]_posy+top;

          if (!wdth) wdth=500;
          if (!hdth) hdth=500;
          if (!x) x=200;
          if (!y) y=200;

          var jWindowObj[#ID#] = $.jWindow({ 
           id: 'state[#ID#]', 
           title: '<#ELEMENTS.TITLE#>', 
           posx: x, 
           posy: y, 
           width: wdth, 
           height: hdth, 
           type: 'iframe', 
           marginTop:0, 
           marginBottom:0, 
           marginLeft:0, 
           marginRight:0, 
           url: '/menu.html?parent=[#MENU_ITEM_ID#]',
           onResizeEnd:function () {
            //Size changed
            var top=$('#scene_background_<#RESULT.ID#>').offset().top;
            var left=$('#scene_background_<#RESULT.ID#>').offset().left;
            var url1="?ajax=1&op=position";
            window[#ID#]_posx=(jWindowObj[#ID#].get('posx'))-left;
            window[#ID#]_posy=(jWindowObj[#ID#].get('posy'))-top;
            window[#ID#]_width=(jWindowObj[#ID#].get('width'));
            window[#ID#]_height=(jWindowObj[#ID#].get('height'));
            url1+='&id=[#ID#]&posx='+window[#ID#]_posx+'&posy='+window[#ID#]_posy+'&width='+window[#ID#]_width+'&height='+window[#ID#]_height;
            $.ajax({url: url1});
           }, 
           onDragEnd:function () {
            //Position changed
            var url1="?ajax=1&op=position";
            var top=$('#scene_background_<#RESULT.ID#>').offset().top;
            var left=$('#scene_background_<#RESULT.ID#>').offset().left;
            window[#ID#]_posx=(jWindowObj[#ID#].get('posx'))-left;
            window[#ID#]_posy=(jWindowObj[#ID#].get('posy'))-top;
            window[#ID#]_width=(jWindowObj[#ID#].get('width'));
            window[#ID#]_height=(jWindowObj[#ID#].get('height'));
            url1+='&id=[#ID#]&posx='+window[#ID#]_posx+'&posy='+window[#ID#]_posy+'&width='+window[#ID#]_width+'&height='+window[#ID#]_height;
            $.ajax({url: url1});
           },
           modal: false });
          jWindowObj[#ID#].show();
          jWindowObj[#ID#].update();
          [#if SCRIPT_ID="0"#]return;[#endif#]
         }
         [#endif MENU_ITEM_ID#][#end STATES#][#end ELEMENTS#][#end RESULT#]

         var url="?ajax=1&op=click";
         url+='&id='+id;
         $.ajax({
          url: url,
          }).done(function(data) { 
           //
          });
         return false;
        }

        var firstRun=1;
        var checkTimer;
        function checkAllStates() {
         clearTimeout(checkTimer);
         var url="?ajax=1&op=checkAllStates";
         $.ajax({
          url: url,
          }).done(function(data) { 
           var obj=jQuery.parseJSON(data);
           if (obj.length) {
            for(var i=0;i<obj.length;i++) {
             var elem=$('#state_'+obj[i].ID);
             if (obj[i].TYPE=='html' && (!codeHash.hasOwnProperty('code'+obj[i].ID) || codeHash['code'+obj[i].ID]!=obj[i].HTML)) {
              elem.html(obj[i].HTML);
              codeHash['code'+obj[i].ID]=obj[i].HTML;
             }

             if (obj[i].STATE=='1' && !elem.is(':visible')) {
              elem.show();
              if (firstRun!=1 && obj[i].SWITCH_SCENE=='1') {
               switchScene(obj[i].SCENE_ID);
              }
             }
             if (obj[i].STATE!='1' && elem.is(':visible')) {
              elem.hide();
             }
            }
            firstRun=0;
            checkTimer=setTimeout('checkAllStates();', 3000);
           }
          });
         return false;
        }

                $(document).ready(function(){
                [#if TOTAL!="1"#]
                        $("#slider").easySlider({
                                auto: false, 
                                numeric: true,
                                continuous: false
                        });
                [#endif TOTAL#]
                        checkAllStates();
                });     


        </script>



<table  border="0" align="center">
 <tr>
  <td valign="top">
<div style="width:<#SETTINGS_SCENES_WIDTH#>px">
<div id="slider">
<ul>
[#begin RESULT#]
<li id='scene_[#ID#]'>
[#if BACKGROUND!=""#]
 <div id="scene_background_[#ID#]" style="position:relative;">
 [#begin ELEMENTS#]
 <!-- element [#ID#] -->
 [#begin STATES#]
  <div id="state_[#ID#]"[#if SCRIPT_ID!="0" || MENU_ITEM_ID!="0"#] onClick="stateClicked([#ID#]);"[#endif#] style="position:absolute;left:<#ELEMENTS.LEFT#>px;top:<#ELEMENTS.TOP#>px;[#if "<#ELEMENTS.TYPE#>"=="html"#]width:<#ELEMENTS.WIDTH#>px;height:<#ELEMENTS.HEIGHT#>px;[#if "<#ELEMENTS.BACKGROUND#>"=="1"#]border:1px solid white;background-color:rgba(0,0,0,0.5);padding:5px;[#endif BACKGROUND#][#endif#][#if SCRIPT_ID!="0"#]cursor:pointer;[#endif#]display:none;">[#if "<#ELEMENTS.TYPE#>"=="img"#]<img src="[#IMAGE#]" border="0">[#endif#][#if "<#ELEMENTS.TYPE#>"=="html"#][#CODE#][#HTML#][#endif#]</div>
 [#end STATES#]
 [#if JAVASCRIPT!=""#]
 <script language="javascript">
  [#JAVASCRIPT#]
 </script>
 [#endif#]
 <!-- /element [#ID#] -->
 [#end ELEMENTS#]
 <img src="[#BACKGROUND#]" border="0">
 </div>
[#endif#]
 </li>
[#end RESULT#]
</ul>
</div>
</div>
</td>
 </tr>
</table>